<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    code: "",
    name: "",
    ip:  "",
    port: null,
    status: 1,
    stationid: null,
    number: "",
    note: ""
  }),
  statusSelect: [],
  stationSelect: []
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const statusSelect = ref(props.statusSelect);
const stationSelect = ref(props.stationSelect);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <!-- <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="编码" prop="code">
          <el-input
            v-model="newFormInline.code"
            clearable
            placeholder="请输入编码"
          />
        </el-form-item>
      </re-col> -->
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="仓门名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="IP地址" prop="ip">
          <el-input
            v-model="newFormInline.ip"
            clearable
            placeholder="请输入IP地址"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="通讯端口" prop="port">
          <el-input-number v-model="newFormInline.port" controls-position="right" placeholder="请输入通讯端口" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="状态" prop="status">
          <el-select v-model="newFormInline.status" placeholder="请选择状态" style="width:100%">
            <el-option
              v-for="item in statusSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="关联站点" prop="stationid">
          <el-select v-model="newFormInline.stationid" placeholder="请选择关联站点" style="width:100%">
            <el-option v-for="item in stationSelect" :key="item.stationid" :label="item.stationname"
              :value="item.stationid" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="设备号" prop="number">
          <el-input
            v-model="newFormInline.number"
            clearable
            placeholder="请输入设备号"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="备注" prop="note">
          <el-input v-model="newFormInline.note" clearable placeholder="请输入备注" type="textarea" />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.el-radio{
  margin-right: 16px;
}
</style>
